<template>
  <view class="recommendSongContainer">
    <!-- 头部  -->
    <view class="header">
      <image src="@/static/images/recommendSong/recommendSong.jpg"></image>
      <view class="date">
        <text class="day">11 /</text>
        <text class="month">12</text>
      </view>
    </view>

    <!-- 列表区域 -->
    <view class="ListContainer">
      <view class="listHeader">
        <text>播放全部</text>
        <text class="changeMore">多选</text>
      </view>

      <!-- 内容区 -->
      <scroll-view scroll-y class="listScroll">
        <view class="scrollItem" v-for="(item, index) in recommendList" :key="item.id" @click="toDetail(item, index)">
          <image :src="item.al.picUrl"></image>
          <view class="musicInfo">
            <text class="musicName">{{ item.name }}</text>
            <text class="author">{{ item.ar[0].name }}</text>
          </view>
          <text class="iconfont icon-gengduo"></text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import request from '@/utils/request.js';
export default {
  data() {
    return {
      // 推荐列表数据
      recommendList: [],
      index: 0
    };
  },
  methods: {
    // 获取推荐列表数据事件
    async getRecommendList() {
      const res = await request('/recommend/songs');
      this.recommendList = res.data.dailySongs;
      // 根据接收上下首标识，找到对应歌曲ID回传
      uni.$on('switchType', val => {
        if (val === 'pre') {
          // 当是第1首时切换上首则回到最后一首
          this.index === 0 && (this.index = this.recommendList.length);
          this.index--;
        } else {
          // 当是最后一首首时切换下首则回到第一首
          this.index === this.recommendList.length - 1 && (this.index = -1);
          this.index++;
        }
        uni.$emit('musicId', this.recommendList[this.index].id);
      });
    },
    // 跳转歌曲详情界面事件
    toDetail(item, index) {
      // 记录当前点击的索引
      this.index = index;
      uni.navigateTo({
        url: `/subpkg/songDetail/songDetail?musicId=${item.id}`
      });
    }
  },
  created() {
    // 判断是否登录
    if (!uni.getStorageInfoSync('userInfo')) {
      uni.showToast({
        title: '请先登录',
        duration: 2000
      });
      return uni.reLaunch({
        url: '/pages/personal/personal'
      });
    }
    this.getRecommendList();
  }
};
</script>

<style lang="scss">
@import '@/static/icon-font/icon-font.css';
page {
  height: 100%;
}

.recommendSongContainer .header {
  position: relative;
  width: 100%;
  height: 300rpx;
}

.recommendSongContainer .header image {
  width: 100%;
  height: 100%;
}

.recommendSongContainer .header .date {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -150rpx;
  margin-top: -50rpx;
  width: 300rpx;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  color: #fff;
}

.header .date .day {
  font-size: 38rpx;
}

/* 列表区域 */
.ListContainer {
  position: relative;
  top: -20rpx;
  padding: 0 20rpx;
  border-radius: 30rpx;
  background: #fff;
}
.listHeader {
  height: 80rpx;
  line-height: 80rpx;
}
.listHeader .changeMore {
  float: right;
}

/* 内容区 */
.listScroll {
  height: calc(100vh - 380rpx);
}
.scrollItem {
  position: relative;
  display: flex;
  margin-bottom: 20rpx;
}
.scrollItem image {
  width: 80rpx;
  height: 80rpx;
  border-radius: 8rpx;
}

.musicInfo {
  display: flex;
  flex-direction: column;
  margin-left: 20rpx;
}

.musicInfo text {
  height: 40rpx;
  line-height: 40rpx;
  font-size: 24rpx;
  max-width: 500rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scrollItem .iconfont {
  position: absolute;
  right: 0;
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: right;
}
</style>
